import { memo } from "react";
import OrgDetailRecommendStyle from "./style";
import { useFetch_getRecommendProducts } from "../../../../service/product";
import { DotLoading, ErrorBlock, Image } from "antd-mobile";
import { ProductType } from "../../../../types/product";
import { useNavigate } from "react-router-dom";
import { routeItmeType } from "../../../../router";

const OrgDetail_recommend = memo((props: { orgId: string }) => {
  const { orgId } = props;
  const nav = useNavigate();
  const { data, loading } = useFetch_getRecommendProducts(orgId);
  const productItemClick = (item: ProductType) => {
    nav(`/${routeItmeType.PRODUCT_DETAIL}/${item.id}`);
  };
  return (
    <OrgDetailRecommendStyle>
      {loading ? (
        <DotLoading color="primary" />
      ) : (
        <>
          <div className="title">推荐课程</div>
          {data.length > 0 ? (
            <div className="recommendList">
              {data?.map((item: ProductType) => {
                return (
                  <div
                    className="recommendItem"
                    key={item.id}
                    onClick={() => productItemClick(item)}
                  >
                    <div className="info">
                      <div className="cover">
                        <Image src={item.cover} fit="scale-down" />
                      </div>
                      <div className="info_container">
                        <div className="name">{item.name}</div>
                        <div className="desc">{item.desc}</div>
                      </div>
                    </div>
                    <div className="price_info">
                      <div className="sellNum">已售：{item.sellNum}</div>
                      <div className="price">
                        <div className="nowPrice">{item.preferentialPrice}</div>
                        <div className="orginPrice">{item.originPrice}</div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <ErrorBlock fullPage title="该门店暂无推荐课程" description="" />
          )}
        </>
      )}
    </OrgDetailRecommendStyle>
  );
});

export default OrgDetail_recommend;
